import React from 'react';
import Welcome from './compontent/Welcome';
import Goodbye from './compontent/Goodbye';
//创建一个高阶组件，对现有的组件进行扩展
function createWelcomeTo(place,WelcomeCompontent) {
    return function(props){
      return(
        <WelcomeCompontent name={props.name} place={place} />
      )
    }
}

function createName(name,WelcomeCompontent){
  return class Wrap extends React.Component{
      constructor(props){
        super(props);
        this.state={
          count:0
        }
      }

      addCount(){
        this.setState({
          count:this.state.count+1
        })
      }
     
      render(){
        return(
          <div style={{border:'5px solid red',width:'500px',height:'110px'}}>
            <button onClick={e=>this.addCount()}>count</button>
            {this.state.count}
            <WelcomeCompontent name={name} place={this.props.place} count={this.state.count}/>
          </div>
        )
      }
  }
}



function ctrateWelBye(place,WelcomeCompontent,GoodbyeCompontent){
    return function(props){
       return(
         <div style={{border:'5px solid orange',width:'500px',height:'200px'}}>
           <WelcomeCompontent name={props.name} place={place}/>
           <GoodbyeCompontent place={place}/>
         </div>
       )
    }
}


const WelcomeYichang=createWelcomeTo('宜昌',Welcome)
const WelcomeCOCO=createName('coco',Welcome)
const WelBye=ctrateWelBye('马尔代夫',Welcome,Goodbye)


class App extends React.Component{
  constructor(props){
    super(props);
  }

  
  render(){
    return(
      <div style={{border:'5px solid pink',width:'500px',height:'400px'}}>
        <Welcome name='李达康' place='武汉'/>
        <WelcomeYichang name='陈百万' />
        <WelcomeCOCO place='上海' />

        <Goodbye name='李达康' place='普吉岛'/>
        <WelBye name="米酒" />


      </div>
    )
  }
}


export default App;
